<div>div 标签</div>
<input type="text">

<script>
  const div = document.querySelector('div')

  // 1. 点击事件
  div.addEventListener('click', function () {
    console.log('点击事件被触发了')
    // 箭头函数this指向外层作用域，不是当前点击对象
    this.style.backgroundColor = 'green'
  })

  // 2. 鼠标移入和离开
  div.addEventListener('mouseenter', function () {
    this.style.backgroundColor = 'green'
  })
  div.addEventListener('mouseleave', function () {
    this.style.backgroundColor = 'pink'
  })


  const text = document.querySelector('input')
  // 3. 键盘按下和弹起
  text.addEventListener('keydown', function(e) {
    console.log(e.key)
  })

  // 4. input监听value值改变
  text.addEventListener('input', function () {
    console.log(this.value)
  })
</script>